<template>
	<view>
		<!-- 自定义弹窗 -->
		<u-popup v-model="pupshow" mode="bottom" border-radius="15" @close="headerClose" 
		:safe-area-inset-bottom="true" zIndex="9999"
		>
			<view class="cumpupOuter" >

				<view class="cumpuphead">
					<view class="title">
						抬头选择
					</view>
					
					<view class="closebtn"  @click="headerClose">
						<u-icon name="close" color="#000" size="30"></u-icon>
					</view>
				</view>
				
				<scroll-view style="max-height: 60vh;" scroll-y="true"  @scrolltolower="dataloadMore">
					<view class="pupContent" >
						<view class="heupItem FlexAlign"
						@click.stop="selectCur(item,index)"
						v-for="(item, index) in pageobj.list">
							<view class="check_area">
								<view class="defcheck FlexRow"
								:class="{ 'isCheck': IssueIndex == index }">
									<i class="iconfont icon-duihao"></i>
								</view>
							</view>
							<view class="infobox FlexItem">
								<view class="heup_top FlexBetween">
									<view class="hleft FlexWrap">
										<view class="title ">
											{{item.title}}
										</view>
										<view class="def_label FlexRow" v-if="item.is_def">
											默认
										</view>
									</view>
									<view class="hright">
										<view class="type_label FlexRow" :class="'type' + item.title_type">
											{{item.type_desc || ''}}
										</view>
									</view>
								</view>
								
								<view class="heup_content">
									<view class="heup_txt">
										联系电话 {{item.mobile || ''}} 
									</view>
									<view class="heup_txt">
										抬头类型 {{item.title_type_desc || ''}} 
									</view>
									<view class="heup_txt" v-if="item.title_type == 1">
										企业税号 {{item.duty_num || ''}} 
									</view>
								</view>
								
								<view class="operaBtn FlexRow" @click.stop="heditclick(item)">
									<i class="iconfont icon-bianji"></i>
									编辑
								</view>
							</view>
							
							
							
							
						</view>
					</view>
					
				</scroll-view>
				
				<view class="defconfirm_btn u-m-b-20 gradient_bg4" @click="createNewData">
					<i class="iconfont icon-a-lujing21"></i>
					添加新抬头
				</view> 
				
				<view class="defconfirm_btn hollow" @click="headerClose">
					不开发票
				</view>


			</view>
		</u-popup>
		
		

	</view>
</template>

<script>
	import {
		api_invoice_list,
	} from "@/api/xtcapi/invoice.js"
	export default {
		props: {
			
		},
		data() {
			return {
				pupshow: false,  // 弹窗显示
				IssueIndex: -1,
				pageobj: {
					page_no: 1, // 	Integer	当前页码
					page_size: 10, // 	Integer	每页显示条数
					page_total: 0,
					list: [],
					initial: true,
				},
				deflist: [],
			}
		},
		methods: {
			openPup(){
				this.pageobj.list = []
				this.pupshow = true
				this.ResetRefresh()
			},
			dataloadMore(){
				if (this.pageobj.page_total > this.pageobj.page_no) {
					this.pageobj.page_no += 1
					this.getDatasList()
				}
			},
			// 列表重置
			ResetRefresh() {
				this.pageobj.page_size = 10
				this.pageobj.page_no = 1
				this.pageobj.page_total = 0
				this.pageobj.list = []
				this.pageobj.initial = true
				this.getDatasList()
			},
			getDatasList(){
				let {
					page_no,
					page_size, 
				} = this.pageobj
				let data = {
					type: [0,1,2],
					title_type: [0,1],
				 	page_no, 
				 	page_size, 
				}
				uni.showLoading({
					title: '加载中'
				})
				api_invoice_list(data).then(res=>{
					this.def_handleDatas(res)
				})
			},
			// 处理列表数据
			def_handleDatas(resobj) {
				let {
					count,
					lists,
				} = resobj
				let {
					page_size,
					initial
				} = this.pageobj
				for (let item of lists) {
					if (!initial) {
						this.pageobj.list.push(item)
					}
				}
				if (initial) { // 初次加载
					this.pageobj.page_total = Math.ceil(count / page_size)
					this.pageobj.list = lists
					this.pageobj.initial = false
				}
				uni.stopPullDownRefresh()
				uni.hideLoading()
			},
			selectCur(item,index) {
				if(item) {
					this.IssueIndex = index
					this.pupshow = false
					this.$emit('selectcur', item)
				}
			},
			heditclick(item){
				let {id} = item
				uni.navigateTo({
					url: `/bundle4/pages/invoice/headup/addheaval?id=${id}`
				})
			},
			createNewData(){
				uni.navigateTo({
					url: '/bundle4/pages/invoice/headup/addheaval'
				})
			},
			// 关闭弹窗
			headerClose() {
				this.pupshow = false
				this.$emit('close')
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	
	
	.defcheck{
		width: 40rpx;
		height: 40rpx;
		i{
			font-size: 28rpx;
			
		}
		&.isCheck{
			border-color: #003232;
			background: #003232;
			i{
				color: #E6FF28;
			}
		}
	}
	.defconfirm_btn{
		i{
			font-size: 28rpx;
			color: #E6FF28 !important;
			margin-right: 22rpx;
		}
	}
	
	.heupItem{
		padding: 0 24rpx 0 30rpx;
		margin-bottom: 20rpx;
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		border: 2rpx solid #F1F1F1;
		&:last-of-type{
			margin-bottom: 0;
		}
		.check_area{
			
		}
		.infobox{
			padding: 30rpx 0;
			margin-left: 30rpx;
			min-height: 200rpx;
			position: relative;
		}
		.heup_top{
			width: 100%;
			margin-bottom: 20rpx;
			.hleft{
				.title{
					max-width: 220rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(38, 38, 38, 1);
					text-align: left;
					// bordeR:solid 1px red;
				}
				.def_label{
					width: 56rpx;
					
					height: 32rpx;
					border-radius: 4rpx;
					border: 2rpx solid rgba(212, 48, 48, 1);
					margin-left: 12rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(212, 48, 48, 1);
					text-align: center;
					white-space:nowrap;
	
				}
			}
			.hright{
				.type_label{
					min-width: 180rpx;
					padding: 0 10rpx;
					height: 48rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					white-space:nowrap;
					&.type0{
						color: rgba(214, 144, 39, 1);
						background: rgba(255, 247, 230, 1);
	
					}
					&.type1{
						color: #EE0A25;
						background: #FEEDF0;
					}
				}
			}
		}
		.heup_content{
			.heup_txt{
				
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				text-align: left;
				line-height: 38rpx;
			}
		}
		.operaBtn{
			position: absolute;
			right: 24rpx;
			bottom: 30rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(38, 38, 38, 1);
			text-align: left;
			i{
				margin-right: 8rpx;
				color: #262626;
				font-size: 30rpx;
			}
		}
	}
	
	
	
	
	.cumpupOuter {
		width: 100%;
		padding: 40rpx;
	}
	.cumpuphead {
		width: 100%;
		position: relative;

		.title {
			margin-bottom: 18rpx;
			font-size: 40rpx;
			font-weight: 700;
			color: rgba(38, 38, 38, 1);
			text-align: left;
			vertical-align: top;

		}
		.closebtn {
			position: absolute;
			right: 0;
			top: 0;
			padding: 20rpx;
			i {
				color: #000;
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}
	
	.pupContent{
		width: 100%;
		margin:30rpx 0 50rpx 0;
		// border:solid 1px red;
		
	
		
	}
	
	
	
</style>